<template>
  <el-dialog :visible.sync="visible" v-dialogDrag title="查看系列周期会议" class="tl-dialog" width="750px" @open="open" @close="close" :append-to-body="true" :modal-append-to-body="true">
    <div style="padding-bottom:10px">
      <div>
        <el-alert :closable="false" type="warning" style="margin-bottom:10px" title="下方表格显示为本周期会议中所有的会议，可对某个会议进行删除，若要修改会议请到会议创建页面修改。"> </el-alert>
        <!--表格渲染-->
        <el-table class="tl-table" ref="mainTable" height="300px" v-loading="loading" :data="datas" @selection-change="doSelectChange" @sort-change="doSortChange" @row-dblclick="doRowDbClick" row-key="id" border fit :row-class-name="doChangeRowClassName">
          <el-table-column prop="name" label="会议主题" min-width="280px" sortable="custom" sort-by="name" align="left" header-align="center" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="begintime" label="会议开始时间" width="170px" sortable="custom" sort-by="begintime" align="center" header-align="center" :formatter="dateTimeFormat" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="endtime" label="会议结束时间" width="170px" sortable="custom" sort-by="endtime" align="center" header-align="center" :formatter="dateTimeFormat" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="dispstate" label="会议状态" width="100px" sortable="custom" sort-by="state" align="center" header-align="center" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column label="状态" width="90px" align="center" header-align="center">
            <template slot-scope="scope">
              <el-tag size="small" v-if="new Date(scope.row.begintime) > new Date()" type="primary">未开始</el-tag>
              <el-tag size="small" v-else-if="new Date(scope.row.endtime) < new Date()" type="info">已结束</el-tag>
              <el-tag size="small" v-else type="success">进行中</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="140px" align="center" fixed="right">
            <template slot-scope="scope">
              <el-button type="text" icon="el-icon-delete" @click="doLimitDelete(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 列表分页 -->
        <el-row class="pagebar" ref="pager">
          <el-pagination @size-change="doChangeSize" @current-change="doChangeIndex" :current-page="pageInfo.currentPage" :page-sizes="pageInfo.pageSizes" :total="pageInfo.totalCount" layout="total, sizes, prev, pager, next, jumper" background class="tl-table-pagination"> </el-pagination>
        </el-row>
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button type="text" @click="doCancelEdit" size="mini">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
/** mixins */
import { mixin_list } from '@tapui/mixins/mixin_list'
/** 子组件 */
/** 工具类 */
import { queryDataCode } from '@tapui/api/dataCode'
import { getAction, putAction, postAction, deleteAction } from '@tapui/utils/http'
import { formatDate } from '@tapui/utils/date'
/** VUE配置 */
export default {
  name: 'TlWorkScheduleRef',
  components: { tlEdit: () => import('./edit.vue') },
  mixins: [mixin_list],
  data() {
    return {
      // 参照是否显示
      visible: false,
      tableHeight: '400px',
      urlPrefix: '/meet/meetManage/',
      // url配置
      url: {
        deleteTask: '/meet/meetManage/delete'
      },
      // 筛选参数
      filtersInfo: {},
      isQueryOnCreated: false,
      // 排序参数
      sorterInfo: {
        sidx: 'begintime',
        sord: 'asc'
      }
    }
  },
  props: {
    readonly: {
      default: false,
      type: Boolean
    }
  },
  methods: {
    /** 打开对话框 */
    open() {
      this.loadData({})
    },
    doLimitDelete(data) {
      if (data.state === 1) {
        this.$tap.alert('发布的会议不允许删除！', 'warning')
        return
      }
      this.doDelete(data.id)
    },
    /** 取消 */
    doCancelEdit() {
      this.visible = false
    },
    /** 格式化日期 yyyy-MM-dd HH:mm:ss */
    dateTimeFormat(row, column, cellValue, index) {
      let dateValue = row[column.property]
      if (dateValue && dateValue.length > 0) {
        return formatDate(new Date(dateValue.replace(new RegExp(/-/gm), '/')), 'yyyy-MM-dd HH:mm')
      } else {
        return ''
      }
    },
    /** 刷新,页号不变*/
    doRefresh() {
      this.loadData({})
      this.$emit('refresh')
    },
    /** 页面关闭时执行 */
    close() {}
  }
}
</script>
